import {View} from 'react-native';
import {useAppTheme} from 'tsun-smart-ui';
import Svg, {Path} from 'react-native-svg';

const WifiSignal = ({signal}: {signal: number}) => {
  const theme = useAppTheme();
  
  // 信号强度等级 (0-4)
  const signalLevel = Math.max(0, Math.min(4, Math.floor(signal / 25)));
  
  const getSignalColor = (index: number) => {
      if (signalLevel === 0) return theme.colors?.neutral?.tip;
      if (index > signalLevel) return theme.colors?.neutral?.tip;
      return theme.colors?.success?.primary;
  };
  
  
  // WiFi路径配置 - 基于提供的SVG
  const wifiPaths = [
    {
      // 中心圆点
      path: "M8.80373 12.8758C8.80373 13.3189 8.44313 13.6796 7.99998 13.6796C7.55325 13.6796 7.19263 13.3189 7.19263 12.8758C7.19263 12.6982 7.25005 12.535 7.34872 12.4022C7.49225 12.2013 7.73086 12.0685 7.99998 12.0685C8.26909 12.0685 8.50413 12.2013 8.65123 12.4022C8.74633 12.535 8.80373 12.6982 8.80373 12.8758Z",
    },
    {
      // 内弧
      path: "M10.4502 11.3392C10.2503 11.3293 10.0534 11.2453 9.90537 11.0872C9.40662 10.5544 8.73023 10.2619 8.00001 10.2619C7.277 10.2619 6.58446 10.5615 6.09646 11.0854C5.79505 11.4084 5.28911 11.4263 4.96617 11.1266C4.64323 10.8253 4.62528 10.3193 4.92491 9.99634C5.71432 9.14768 6.83564 8.6615 8.00001 8.6615C9.13786 8.6615 10.2378 9.12865 11.026 9.94474C11.0419 9.96121 11.0577 9.97781 11.0733 9.99456C11.111 10.0349 11.1437 10.0782 11.1715 10.1235C11.2303 10.2195 11.267 10.3248 11.2817 10.4325C11.2878 10.4774 11.2901 10.5226 11.2886 10.5678C11.2819 10.7723 11.1971 10.9742 11.0357 11.1249C10.8814 11.2702 10.6858 11.3401 10.4903 11.3401C10.4769 11.3401 10.4636 11.3398 10.4502 11.3392Z",
    },
    {
      // 中弧
      path: "M12.7723 9.05795C12.5624 9.05795 12.3525 8.97544 12.1964 8.8122C11.0895 7.66219 9.59854 7.03061 7.99998 7.03061C6.40322 7.03061 4.91051 7.66219 3.79816 8.81042C3.49138 9.12794 2.98364 9.13514 2.66787 8.82837C2.35032 8.52159 2.34315 8.01382 2.64993 7.6963C4.0655 6.23587 5.96546 5.4303 7.99998 5.4303C10.0381 5.4303 11.9381 6.23765 13.3482 7.70163C13.655 8.01924 13.6461 8.52692 13.3267 8.83369C13.1724 8.98442 12.9733 9.05795 12.7723 9.05795Z",
    },
    {
      // 外弧
      path: "M15.1998 6.63058C14.9917 6.63058 14.7853 6.54985 14.6274 6.39015C12.8674 4.59072 10.5136 3.60031 7.99999 3.60031C5.48466 3.60031 3.13078 4.59072 1.37255 6.39015C1.06395 6.70599 0.558025 6.71132 0.240458 6.40277C-0.0753109 6.09413 -0.0806839 5.58645 0.227913 5.2707C2.28934 3.16075 5.05048 2 7.99999 2C10.9459 2 13.7071 3.16262 15.7721 5.2707C16.0807 5.58645 16.0753 6.09235 15.7595 6.40277C15.6035 6.55527 15.4025 6.63058 15.1998 6.63058L15.1998 6.63058Z",
    },
  ];
  
  return (
    <View className="flex-row items-end">
      <Svg width={16} height={16} viewBox="0 0 16 16">
        {wifiPaths.map((item, index) => (
          <Path
            key={index}
            d={item.path}
            fill={getSignalColor(index)}
            fillRule="evenodd"
          />
        ))}
      </Svg>
    </View>
  );
};

export default WifiSignal; 